<template>
	<view class="prog">
		
		<view class="warp-bottom-palyer" v-for="(item,index) in list" :key='item.id'>
			 <view class="warp-bottom-palyer-list">
			 	<view class="jiemu">
					<view class="warp-bottom-palyer-list-jiemu">
						<view class="u-line-1">
							节目名称：{{item.programName}}
						</view>
						<view >
							票数：{{item.totalVote}}
						</view>
						<view>
							评分：{{item.programScore}}
						</view>
					</view>
					<view class="warp-bottom-palyer-list-jiemur">
						 <view @click="tapupdate(item)">编辑</view>
						 <view style="background: #e7ad50;" @click="tapPlayer(item)">选手列表</view>
						 <!-- <view style="background: #fff;color: #e8565c;border: 1rpx solid #e8565c;">删除</view> -->
					</view>
				</view>
			 </view>
		</view>
		<u-modal :show="addshow" :title="title" @cancel='addshow = false' @confirm='confirm' :closeOnClickOverlay="true" showCancelButton confirmColor='#e8565c'>
			 <view class="slot-content">
			 		<u--input
			 		    placeholder="请输入节目名称"
			 		    v-model="programName"
						clearable
			 		  ></u--input>
		     </view>
		</u-modal>
		<!--分享 -->
		<u-popup :show="fenshow" mode="bottom"  @close="fenshow = false">
		      <uni-list>
		         
		          <uni-list-item v-for="(item,index) in list" :key='index' :title="item.programName" :rightText="item.name" clickable  @click="tapjie(item,index)" ></uni-list-item>
		      </uni-list>
			 <view style="padding: 30rpx;">
				  <u-button openType='share' color='#e8565c' class='custom'>分享</u-button>
			 </view>
			</u-popup>
		
		  <uni-fab
		              :pattern="pattern"
		              :content="content"
		              horizontal="right"
		              vertical="bottom"
		              @trigger="trigger"
		          ></uni-fab>
	</view>
</template>

<script>
	import {getInstitutionProgramSaveApi,getInstitutionProgramListApi,
	getInstitutionProgramUpdateApi
	} from '@/config/api.js'
	export default {
		data() {
			return {
				 pattern:{
					 buttonColor:'#e8565c'
				 },
				 content:[
					 {
						 text:'分享',
						 iconPath:'https://imagesize.hknet-inc.com/sp/files/0e5d34fd-e3eb-442f-8a91-cc2d99f055e5.png'
					 },
					 {
					 	text:'添加节目',
						iconPath:'https://imagesize.hknet-inc.com/sp/files/edf22ad8-f7dc-4c2d-a171-809c7f7df148.png'
					 }
				 ],
				 list:[],
				 addshow:false,
				 title:'添加节目',
				 programName:'',
				 competitionId:'',
				 institutionId:'',
				 fenlist:[],
				 fenshow:false,
				 programId:'',
				 custom:{
					 padding:'30rpx 0'
				 },
				 status:1,
				 updateId:'',
				 chooseProgramName:'',
			};
		},
		onLoad(option) {
			this.competitionId = option.competitionId
			this.institutionId = option.institutionId
			this.getList()
		},
		onShareAppMessage() {
			
			if(!this.programId){
				 uni.$u.toast('可以点击下方红色按钮选择节目再分享')
			}
			
			return{
				title:`${this.chooseProgramName}诚邀您报名，快来报名吧！`,
				path:'pages/apply/palyer-apply/palyer-apply?competitionId= '+this.competitionId + '&institutionId=' +this.institutionId + '&programId=' +this.programId
			}
		},
		methods:{
			trigger(e){
				if(e.index == 1){
					 this.addshow = true
					 this.status =1
					 this.title = '添加节目'
				}else if(e.index == 0){
					this.fenshow = true
				}
			},
			//选择节目
			tapjie(e,index){
				this.list.filter(item=>{
					return item.name = ''
				})
				
				uni.showToast({
					title:`已选择${e.programName},可点击右上角分享给选手报名`,
					duration:3000,
					icon:'none'
				})
				this.list[index].name = '已选择'
				this.programId = e.id
				this.chooseProgramName = e.programName
			},
			confirm(){
				if(this.programName == ''){
					uni.$u.toast('请输入节目名称')
				}else{
					if(this.status == 1){
						getInstitutionProgramSaveApi({
							 institutionId:this.institutionId,
							 programName:this.programName
						}).then(res=>{
							this.programName = ''
							this.addshow = false
							this.getList()
							 uni.$u.toast('添加成功')
						})
					}else{
						getInstitutionProgramUpdateApi({
							 programName:this.programName,
							 id:this.updateId
						}).then(res=>{
							this.programName = ''
							this.addshow = false
							this.getList()
							 uni.$u.toast('修改成功')
						})
					}
				}
			},
				
			tapupdate(e){
				 this.updateId = e.id
				 this.status = 2
				 this.addshow = true
				 this.title = '修改节目'
			},
			tapPlayer(e){
				uni.$u.route({
					url: '/pages/home/home/playerList',
					params: {
						institutionId:this.institutionId,
						competitionId:this.competitionId,
						programId:e.id,
						type:1
					}
				})
			},
			getList(){
				getInstitutionProgramListApi({
					competitionId:this.competitionId,
					institutionId:this.institutionId
				}).then(res=>{
                  this.list = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
.prog{
	padding-bottom: 200rpx;
.warp-bottom-palyer {
		
		&-list {
			border-top: 1rpx solid #dddddd;
			display: flex;
			align-items: center;
			padding: 30rpx;
            .jiemu{
				display: flex;
				justify-content: space-between;
				.warp-bottom-palyer-list-jiemu{
					width: 580rpx;
					>view{
						height: 60rpx;
						line-height: 60rpx;
					}
				}
				.warp-bottom-palyer-list-jiemur{
					// display: flex;
					// flex-direction: row-reverse;
					>view{
						margin-top: 10rpx;
						flex-direction:row;
						display: block;
						width: 130rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						background: $uni-color-primary;
						color:#fff;
						border-radius: 20rpx;
					}
				}
			}
			.header {
				width: 158rpx;
				height: 158rpx;
				border-radius: 10rpx;

			}

			.center {
				flex: 1;

				margin: 0rpx 10rpx;

				>view {
					line-height: 50rpx;
				}
			}

			.vote {
				background-color: $uni-color-primary;
				color: #FFFFFF;
				height: 50rpx;
				width: 125rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
			}
		}
	}
}
</style>
